<nz-card nzHoverable [nzBodyStyle]="{ padding: 0 }">
  <div class="p-8">
    <nz-input-group nzSize="small" [nzSuffix]="suffixIcon">
      <input type="text" ngModel nz-input nzSize="small" placeholder="Search" (ngModelChange)="changeSearch($event)" />
    </nz-input-group>
    <ng-template #suffixIcon>
      <i nz-icon nzType="search"></i>
    </ng-template>
  </div>

  <nz-tree-view [nzBlockNode]="true" [nzDataSource]="deptTreeService.dataSource" [nzTreeControl]="treeControl">
    <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
      <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
      <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="selectListSelection.isSelected(node)" (nzClick)="clickNode(node)">
        <span [innerHTML]="node.departmentName | nzHighlight: deptTreeSearchService.searchValue : 'i' : 'highlight'"></span>
      </nz-tree-node-option>
    </nz-tree-node>

    <nz-tree-node *nzTreeNodeDef="let node; when: deptTreeService.hasChild" nzTreeNodePadding>
      <nz-tree-node-toggle>
        <i nz-icon nzTreeNodeToggleRotateIcon nzType="caret-down"></i>
      </nz-tree-node-toggle>
      <nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="selectListSelection.isSelected(node)" (nzClick)="clickNode(node)">
        <span [innerHTML]="node.departmentName | nzHighlight: deptTreeSearchService.searchValue : 'i' : 'highlight'"></span>
      </nz-tree-node-option>
    </nz-tree-node>
  </nz-tree-view>
</nz-card>
